<template>
  <div class="vw-user" v-if="viewLoading && models.user.id">
    <div class="info">
      <img class="avatar" src="../../assets/imgs/user/a.png">
      <van-rate class="rate" v-model="models.user.star_level" :size="12" void-color="#ffd21e"/>
      <div class="account">用户名：{{ models.user.account }}</div>
    </div>
    
    <van-row class="wallet">
      <van-col span="8">
        <router-link :to="{name: 'userWalletRecord'}">
          <span>预约币</span>
          <div>{{ models.user_wallet.appointment }}个</div>
        </router-link>
      </van-col>
      <van-col span="8">
        <router-link :to="{name: 'userWalletRecord'}">
          <span>静态余额</span>
          <div>{{ Math.round(models.user_wallet.static, 2) }}分</div>
        </router-link>
      </van-col>
      <van-col span="8">
        <router-link :to="{name: 'userWalletRecord'}">
          <span>动态余额</span>
          <div>{{ Math.round(models.user_wallet.dynamic, 2) }}分</div>
        </router-link>
      </van-col>
    </van-row>

    <van-cell-group>
      <van-cell title="个人资料" :to="{name: 'userInfo'}" is-link/>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="修改登陆密码" :to="{name: 'userChangeLoginPassword'}" is-link/>
      <van-cell title="修改安全密码" :to="{name: 'userChangeSafePassword'}" is-link/>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="会员注册" :to="{name:'userCreate', query: {p_account: models.user.account}}" is-link/>
      <van-cell title="预约币转账" :to="{name: 'UserWalletAppointmentTransfer'}" is-link/>
      <van-cell title="我的直推" :to="{name: 'userTeam'}" is-link/>
      <van-cell title="留言" :to="{name: 'userMessageIndex'}" is-link/>
      <van-cell class="vw-user-logout" title="退出" @click="onClickLogout"/>
    </van-cell-group>
  </div>

  <div v-else="viewLoading" style="margin: 20% auto 0 auto; width: 13rem; ">
    <van-loading v-if="!viewLoading" color="black" size="50px" style="background-color:rgba(0, 0, 0, 0.5); left: 40%;" />
    <van-cell-group v-else><van-cell class="vw-user-logout" title="退出" @click="onClickLogout"/></van-cell-group>
  </div>
</template>

<script>
  import { Cell, CellGroup, Col, Loading, Rate, Row, Toast } from 'vant';
  import { mapState } from 'vuex';
  import authService from '@/services/user/auth';

  export default {
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Col.name]: Col,
      [Loading.name]: Loading,
      [Row.name]: Row,
      [Rate.name]: Rate
    },
    data() {
      return {
        viewLoading: false
      };
    },
    methods: {
      onClickLogout() {
        authService.removeToken().then(() => {
          Toast('退出成功');

          setTimeout(() => {
            // this.$router.push({ name: 'homeIndex' });
            window.location.reload();
          }, 500);
        });
      }
    },
    computed: mapState({
      models: state => state.user
    }),
    created() {
      this.$store.dispatch('user/findFirstByTokenIsEmpty').then((res) => {
        this.viewLoading = true;
        if(res.code != 0) {
          Toast(res.msg);
          return false;
        }
      }).catch((err) => {
        this.viewLoading = true;
      });
    }
  }
</script>

<style>
  .vw-user {
    background-color: #efefef;
    padding-bottom: 45px;
  }
  .vw-user > .info {
    height: 140px;
    color: #fff;
    background: #faaf20 url(../../assets/imgs/user/bg.jpg) no-repeat;
    background-size: cover;
  }
  .vw-user > .info > .avatar {
    padding-top: 1.3rem;
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    margin: 0 auto;
    border-radius:50%;
  }
  .vw-user > .info > .rate,
  .vw-user > .info > .account {
    text-align: center;
    font-size: 0.8rem;
  }
  .vw-user > .wallet {
    background-color: #fff;
    padding: 5px 0;
    font-size: 12px;
    text-align: center;
    color: #000;
  }
  .vw-user > .wallet .van-col {
    border-right: solid 1px #d0d0d0;
  }
  .vw-user > .wallet .van-col:last-child {
    border-right: none;
  }
  .vw-user > .wallet .van-col span {
    color: #888;
    display: block;
  }
  .vw-user > .wallet .van-col div {
    color: #000;
  }

  .vw-user .van-cell-group {
    margin-bottom: .3rem;
  }

  .vw-user-logout {
    color: #fff;
    background-color: #0000ff;
    text-align: center;
  }
</style>